<template>
  <!-- 属性、事件、v-model解成modelValue和onUpdate:modelValue等等，这些都在$attrs里面 -->
  <el-dialog :class="{ 'hidden-title': hiddenTitle }" top="5vh" v-bind="$attrs">
    <template v-for="name in Object.keys($slots)" #[name]>
      <slot :name="name"></slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, useAttrs, useSlots } from 'vue'

defineOptions({
  name: 'XuDialog',
})
let hiddenTitle = computed(() => {
  return useAttrs().title === undefined && !Object.keys(useSlots()).includes('header')
})
</script>
<!-- 加scoped没有用，得在template中加一个根dom节点才有用 -->
<style lang="scss">
.hidden-title {
  .el-dialog__header {
    display: none;
  }
}

.el-dialog {
  max-height: 85vh;
  overflow: hidden;
  border-radius: var(--el-border-radius-base);
}

.el-dialog__body {
  padding: 12px 20px 0 !important;
}
</style>
